<template>
    <ul class="songsList"
        v-loading="!songs.length"
        element-loading-background="rgba(122, 122, 122, 0.8)"
        element-loading-text="Loading..."
    >
        <li v-for="(item,index) in songs" class="item" :key="item.id" @click="selectItem(item,index)">
            <div class="content">
                <h2 class="name"><a>{{item.name}}</a></h2>
                <p class="desc"><a>{{getDesc(item)}}</a></p>
            </div>
            <el-divider border-style="dashed" />
        </li>

    </ul>

</template>

<script>
export default{
    name: 'songs-list',
    emits: ['selectItem'],
    props: {
        songs: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        getDesc(item){
            return `${item.singer} - ${item.album}`
        },
        selectItem(item,index){
            this.$emit('selectIndex' , {item,index})
        }
    }
}

</script>

<style scoped>
.item{
    height: 100px;
    list-style: none;
    /*float: left;*/
    /*margin-right: 300px;*/
}
.name{
    float: left;
    clear: both;
    margin-bottom: 0px;
}
.desc{
    clear: both;
    float: left;
    margin-left: 0;

}

p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

a{
    cursor: pointer;
}
</style>
